// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss';
// import { createLocalFontProcessor } from "@unocss/preset-web-fonts/local";
import presetTagify from '@unocss/preset-tagify';
import presetRemToPx from '@unocss/preset-rem-to-px';
import presetLegacyCompat from '@unocss/preset-legacy-compat';
import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx';
import transformerCompileClass from '@unocss/transformer-compile-class';

// import { createExternalPackageIconLoader } from "@iconify/utils/lib/loader/external-pkg";
export default defineConfig({
  rules: [
    [
      'p-c', // 使用时只需要写 p-c 即可应用该组样式
      {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
      },
    ],
    ['font-bold', { 'font-weight': 700 }],
    [
      'ellipsis',
      {
        'white-space': 'nowrap',
        'text-overflow': 'ellipsis',
        overflow: 'hidden',
      },
    ],
    // 动态快捷方式
    [/^un-(.*)$/, ([_, body]) => `${body}`],
    [/^btn-(.*)$/, ([_, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
    // [/^m-(\d+)$/, ([_, d]: any) => ({ margin: `${d / 4}rem` })],
  ],
  shortcuts: [
    // ...
    { btn: 'px-4 py-2 border rounded' },
    { 'rend-btn': 'px-4 py-2 border rounded' },
  ],
  theme: {
    breakpoints: {
      // sm: '320px',
      // md: '640px',
    },
    colors: {
      // class="text-very-cool"
      veryCool: '#0000ff',
      // class="bg-brand-primary"
      // class="bg-brand-info"
      brand: {
        primary: 'hsla(var(--hue, 217), 78%, 51%)',
        info: '#6f6f72',
      },
    },
  },
  presets: [
    presetUno(),
    // https://unocss-cn.pages.dev/presets/legacy-compat 旧版兼容工具类的集合
    // 列如 rgb(255 0 0 / 50%) -> rgba(255, 0, 0, 50%)
    presetLegacyCompat({
      // options
      commaStyleColorFunction: true,
    }),
    // 将所有工具类中的 rem 转换为 px。
    presetRemToPx({
      /**
       * 1rem = n px
       * @default 16
       */
      baseFontSize: 16,
    }),
    presetIcons({
      extraProperties: {
        display: 'inline-block',
        'vertical-align': 'middle',
      },
      customizations: {
        customize(props: any) {
          props.width = '2em';
          props.height = '2em';
          return props;
        },
        iconCustomizer(collection: any, icon: any, props: any) {
          // 自定义此集合中的所有图标
          if (collection === 'my-other-icons') {
            props.width = '4em';
            props.height = '4em';
          }
          // 自定义此集合中的此图标
          if (collection === 'my-icons' && icon === 'account') {
            props.width = '6em';
            props.height = '6em';
          }
          // 自定义此集合中的 @iconify 图标
          if (collection === 'mdi' && icon === 'account') {
            props.width = '2em';
            props.height = '2em';
          }
        },
      },
      collections: {
        // 自定义图标
        custom: {
          /*i-custom-circle ... */
          circle: '<svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="50"></circle></svg>',
        },
        // ...createExternalPackageIconLoader("an-awesome-collection"),
        /*i-carbon-[keyName] ... */
        // carbon: () => import('@iconify-json/carbon/icons.json').then((i) => i.default),
        // mdi: () => import('@iconify-json/mdi/icons.json').then((i) => i.default),
        // bitcoin: () => import('@iconify-json/bitcoin-icons/icons.json').then((i) => i.default),
        // unjs: () => import('@iconify-json/unjs/icons.json').then((i) => i.default),
      },
    }),
    presetTypography(),
    presetWebFonts({
      // // 使用 axios 并设置 https 代理
      // customFetch: (url: string) =>
      // 	axios
      // 		.get(url, { httpsAgent: new ProxyAgent("https://localhost:7890") })
      // 		.then((it) => it.data),
      // provider: "google",
      // fonts: {
      // 	sans: "Roboto",
      // 	mono: ["Fira Code", "Fira Mono:400,700"],
      // },
      // provider: "none",
      // fonts: {
      // 	sans: "Roboto",
      // 	mono: "Fira Code",
      // },
      // This will download the fonts and serve them locally
      // processors: createLocalFontProcessor({
      // 	// Directory to cache the fonts
      // 	cacheDir: "node_modules/.cache/unocss/fonts",
      // 	// Directory to save the fonts assets
      // 	fontAssetsDir: "public/assets/fonts",
      // 	// Base URL to serve the fonts from the client
      // 	fontServeBaseUrl: "/assets/fonts",
      // }),
    }),
    // https://unocss-cn.pages.dev/presets/tagify
    // <un-flex> 弹性盒 </un-flex>
    // 今天我感觉 <i-line-md-emoji-grin />！
    presetTagify({
      prefix: 'un-',
      // 将 display: inline-block 添加到匹配的图标
      extraProperties: (matched) => (matched.startsWith('i-') ? { display: 'inline-block' } : {}),
    }),
    presetAttributify({
      // 默认情况下，前缀是可选的，如果要强制使用前缀，请设置
      prefix: 'un-',
      prefixedOnly: false,
      //要从提取中忽略的属性列表。
      ignoreAttributes: ['text-test'],
    }),
  ],
  transformers: [
    // 属性化 JSX 转换器 https://unocss-cn.pages.dev/transformers/attributify-jsx
    // <div translate-x-[100px] /> <!-- 不能包含 `[` 或 `]` -->
    // <div translate="x-[100px]" />
    transformerAttributifyJsx({
      // 此转换器仅会转换有效的 UnoCSS 实用程序属性。 您还可以通过 blocklist 屏蔽一些属性不被转换。
      blocklist: [/texttest-[a-zA-Z]*/, 'text-yyyyy'],
    }),
    // https://unocss-cn.pages.dev/transformers/directives
    // <style>标签中 指令转换器，用于 @apply、@screen 和 theme() 指令：
    //   --at-apply: "hover:text-red hover:font-bold";
    //   /* 或 */
    //   @apply 'hover:text-red hover:font-bold';
    transformerDirectives({
      // 默认值
      applyVariable: ['--at-apply', '--uno-apply', '--uno'],
      // 或者禁用：
      // applyVariable: false
    }),
    //https://unocss-cn.pages.dev/transformers/variant-group 变体组转换器
    // 用法 <div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>
    // 将被转换为：<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>
    transformerVariantGroup(),
    // https://unocss-cn.pages.dev/transformers/compile-class 编译类转换器
    // <div class=":uno: text-center sm:text-left"></div>
    // <div class="uno-qlmcrp"></div>
    // .uno-qlmcrp {
    //   text-align: center;
    // }
    // @media (min-width: 640px) {
    //   .uno-qlmcrp {
    //     text-align: left;
    //   }
    // }
    transformerCompileClass(),
  ],
});
